<template>
  <div id="Wrap">
    <!-- 表格 -->
    <el-table class="table" :data="tableData" :fit="true" :border="hasBorder" :row-class-name="tableRowClassName" @row-click="rowClick" @selection-change="selectionChange">
      <el-table-column v-if="selectionShow" type="selection" width="50" />
      <!-- 序号 -->
      <el-table-column v-if="hasIndex" :fit="true" type="index" label="序号" header-align="center" align="center" width="100" />
      <!-- 其他 -->
      <template v-for="(item, index) in tableColumnOptions">
        <!-- 插槽列 -->
        <el-table-column
          v-if="item.columnType"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :header-align="item.headerAlign || 'center'"
          :align="item.align || 'center'"
        >
          <template slot-scope="{ row }">
            <slot :name="item.slotName" :data="row" />
          </template>
        </el-table-column>
        <!-- 非插槽列 -->
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :header-align="item.headerAlign || 'center'"
          :align="item.align || 'center'"
        />
      </template>
    </el-table>
    <!-- 分页器 -->
    <div v-if="paginationShow" class="pagination">
      <el-pagination
        :hide-on-single-page="isShowPagination"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="page"
        :page-size="size"
        :total="tableDataTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'BaseTable',
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    /**
    * 表格列项数据 (必传)
    * label 表格列项名称
    * prop: 表格数据的字段名
    * width 列项宽度
    * align       内容对齐方式 (默认居中)
    * headerAlign 表头对齐方式 (默认居中)
    * columnType  是否开启插槽
    * slotName    插槽名（自定义）
    */
    tableColumnOptions: {
      type: Array,
      require: true,
      default() {
        return []
      }
    },
    // 表格数据总量
    tableDataTotal: {
      type: Number,
      default: 0
    },
    // 是否具有索引
    hasIndex: {
      type: Boolean,
      default: false
    },
    // 是否显示边框
    hasBorder: {
      type: Boolean,
      default: false
    },
    // 是否显示选择框
    selectionShow: {
      type: Boolean,
      default: false
    },
    // 是否显示选分页器
    paginationShow: {
      type: Boolean,
      default: true
    },
    // 表格当前页数
    page: {
      type: Number,
      default: 1
    },
    // 表格每页数量
    size: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
    }
  },
  computed: {
    // 计算是否显示分页器
    isShowPagination() {
      const isShow = this.tableDataTotal === 0
      return isShow
    }
  },
  methods: {
    // 表格变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'color-row'
      }
    },
    // 修改当前页
    handleCurrentChange(val) {
      const params = {
        page: val,
        size: this.size
      }
      this.$emit('tableUpdate', params)
    },
    // 修改每页数量
    handleSizeChange(val) {
      const params = {
        page: this.page,
        size: val
      }
      this.$emit('tableUpdate', params)
    },
    // 选择框改变
    selectionChange(e) {
      this.$emit('selectionChange', e)
    },
    // 点击当前行
    rowClick(e) {
      this.$emit('rowClick', e)
    }
  }
}
</script>

<style>
.el-table__header, .el-table__body{
  width: 100% !important;
}
.el-table__empty-block{
  width: auto !important;
}

</style>

<style lang="less" scoped>
#Wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
>.el-table{
  /* overflow-y:scroll!important; */

}
#Wrap .pagination{
  margin-top: 20px;
  margin-left: auto;
}
>.cell{
    text-align: center;
}
> .cell #link{
  font-family: MicrosoftYaHei;
  color: #445af7;
  cursor: pointer;
}
> .cell #delete {
  color: #ff5b5b;
  margin-left: 35px;
    cursor: pointer;
}
>.color-row{
  background-color: rgb(243, 243, 243);
}
>.el-table--border::after, .el-table--group::after, .el-table::before {
    content: '';
    position: absolute;
    background-color: transparent!important;
    z-index: 1;
}
</style>
